<template>
  <div class="rank">
    <div class="img" :style="'background-image: url(' + ranklogo.coverImgUrl + ')' " @click="toSongsList(ranklogo.id)">
      <i class="iconfont icon-playcircle" @click.stop="playMusic(songs[0].id)"></i>
      <span class="time">{{ ranklogo.updateTime | showDate }}更新</span>
    </div>
    <div class="songslist" v-for="(item, index) in songs" :key="index" @click="playMusic(item.id, item.num)">
      <div class="name">
        <span class="num">{{ item.num }}</span>
        <span class="song_name"> {{ item.name }}</span>
      </div>
      <span class="nickname">{{ item.ar[0].name }}</span>
    </div>
    <div class="check_all">
      <span class="all" @click="toSongsList(ranklogo.id)">查看全部></span>
    </div>
  </div>
</template>

<script>
import { getSongsListInfo, getSongsDetail } from '../../../network/songsranking.js'
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
import { formatTime } from '../../common/util.js'
export default {
  props: ['officialrank', 'id'],
  data () {
    return {
      ranklogo: {},
      songsId: [],
      songs: [],
      nums: 1,
      index: 0
    }
  },
  methods: {
    toSongsList (id) {
      this.$router.push('/songs/' + id)
    },
    getOfficialRank () {
      this.ranklogo = this.officialrank
    },
    getSongsListInfo (id) {
      getSongsListInfo(id).then(res => {
        // console.log(res.data)
        res.data.privileges.slice(0, 8).forEach(item => {
          this.songsId.push(item.id)
        })
        // console.log(this.songsId)
        this.songsId.forEach(item => {
          getSongsDetail(item).then(res => {
            res.data.songs[0].num = this.nums++
            this.songs.push(res.data.songs[0])
          })
        })
        // console.log(this.songs)
      })
    },
    // 播放音乐
    playMusic (id, index) {
      // console.log(row.mainTrackId)
      if (id === null) return
      this.getMusicUrl(id)
      this.getMusicMenu(id)
      this.$store.commit('musicListIds', this.songsId)
      this.$store.commit('musicIndex', index - 1)
      this.$store.commit('setMusicCount', this.songsId.length)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data.songs[0])
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    }
  },
  filters: {
    showDate: function (value) {
      const date = new Date(value)
      return formatTime(date, 'MM月dd日')
    }
  },
  created () {},
  watch: {
    id () {
      this.getSongsListInfo(this.id)
    },
    officialrank () {
      this.getOfficialRank()
    }
  }
}
</script>

<style lang="less" scoped>
  .rank {
    width: 31%;
    border: 1px solid #ededed;
    margin: 10px;
    // display: flex;
    // flex-direction: column;
    .img {
      position: relative;
      width: 100%;
      height: 110px;
      box-sizing: border-box;
      // background-repeat: no-repeat;
      background-size: 100% 250px;
      background-position: 0 185px;
      overflow: hidden;
      i {
        position: absolute;
        bottom: 5%;
        right: 2%;
        font-size: 30px;
        color: #fff;
        border-radius: 50%;
      }
      i:hover {
        background: rgba(0, 0, 0, 0.4);
      }
      .time {
        position: absolute;
        bottom: 2%;
        left: 10%;
        color: #fff;
        font-size: 14px;
      }
    }
    .songslist {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 7px 10px;
      box-sizing: border-box;
      .name {
        width: 80%;
        text-align: left;
        display: flex;
        align-items: center;
        .num {
          width: 10%;
          color: #e70000;
        }
        .song_name {
          width: 90%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .nickname {
        width: 19%;
        // display: flex;
        // flex-direction: row;
        // flex-wrap: nowrap;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .songslist:nth-child(2n) {
      background-color: #f5f5f7;
    }
    .songslist:hover {
      background-color: #ebeced;
    }
    .check_all {
      width: 100%;
      background-color: #f5f5f7;
      padding: 10px;
      box-sizing: border-box;
      .all {
        text-align: right;
        font-size: 15px;
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
      }
    }
  }
</style>
